<script setup lang="ts">
defineProps({
  name: String,
  icon: String,
  active: Boolean,
  color: String
})
const getImg = (img: string) => {
  return new URL(`../../../assets/mac/${img}.svg`, import.meta.url).href;
}
</script>

<template>
  <div class="dock-item">
    <el-tooltip
        :content="name"
        placement="top"
    >
      <img :style="color ? ('background-color:' + color) : ''" :src="getImg(icon)" alt=""/>
    </el-tooltip>
    <div class="status" :class="{open: active}"></div>
  </div>
</template>

<style scoped lang="scss">
.dock-item{
  width: 100%;
  height: 100%;
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: white;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.2s;

    &:hover{
      transform: scale(1.1);
    }
  }
  .status{
    position: absolute;
    left: calc(50% - 3px);
    bottom: -13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: transparent;
    &.open{
      background-color: black;
    }
  }
}
</style>
